<template>
  <view class="this-device-page">
        <image class="page-bg" src="/static/images/bg.png" mode="aspectFill" />
    <view class="gradient-bg" :style="{ top: navBarHeight + 'px' }"></view>
    <CustomNavbar title="宽带本机报障" />
    
    <view class="page-content" :style="{ paddingTop: navBarHeight + 'px' }">
      <!-- 白色卡片容器 -->
      <view class="form-card">
        <!-- 宽带账号 -->
        <view class="form-item">
          <text class="form-label">宽带账号</text>
        
          <view class="form-input-wrapper">
            <input 
              class="form-input" 
              type="text" 
              placeholder="请选择"
              v-model="broadbandAccount"
           
            />
            <button class="select-btn" @click="selectAccount">查验</button>
          </view>
        </view>
        
        <!-- 地区 -->
        <view class="form-item">
          <text class="form-label">地区</text>
          <picker 
            mode="selector" 
            :range="regions" 
            :value="regionIndex"
            @change="onRegionChange"
          >
            <view class="form-input-wrapper picker-wrapper">
              <input 
                class="form-input" 
                type="text" 
                placeholder="请选择"
                :value="regionIndex >= 0 ? regions[regionIndex] : ''"
                disabled
              />
              <image class="arrow-icon" src="/static/icons/icon-right.png" mode="aspectFit" />
            </view>
          </picker>
        </view>
        
        <!-- 联系电话 -->
        <view class="form-item">
          <text class="form-label">联系电话</text>
          <input 
            class="form-input" 
            type="text" 
            placeholder="请输入"
            v-model="contactPhone"
          />
        </view>
        
        <!-- 故障类型 -->
        <view class="form-item">
          <text class="form-label">故障类型</text>
          <view class="radio-group">
            <view 
              class="radio-item-container" 
              v-for="(type, index) in faultTypes" 
              :key="index"
              @click="selectFaultType(index)"
            >
              <view class="radio-item">
                <view class="radio-circle" :class="{ checked: selectedFaultType === index }">
                  <view class="radio-dot" v-if="selectedFaultType === index"></view>
                </view>
                <text class="radio-label">{{ type }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 确定按钮 -->
      <button class="confirm-btn" @click="handleConfirm">确定</button>
    </view>
    
    <!-- 账号选择弹窗 -->
    <view class="modal-overlay" v-if="showAccountModal" @click="closeAccountModal">
      <view class="modal-content" @click.stop>
        <view class="modal-title">宽带账号选择</view>
        <view class="modal-prompt">请选择</view>
        <scroll-view class="account-list" scroll-y>
          <view 
            class="account-item" 
            :class="{ checked: selectedAccountIndex === index }"
            v-for="(account, index) in accountList" 
            :key="index"
            @click="selectAccountItem(index)"
          >
            <text class="account-text">宽带账号:  {{ account }}</text>
            <view class="account-checkbox" :class="{ checked: selectedAccountIndex === index }">
              <view class="checkmark" v-if="selectedAccountIndex === index">✓</view>
            </view>
          </view>
        </scroll-view>
        <button class="modal-confirm-btn" @click="confirmAccountSelection">确定</button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import CustomNavbar from '@/components/CustomNavbar.vue'
import { api } from '@/utils/api'

const navBarHeight = ref(80)
const broadbandAccount = ref('')
const contactPhone = ref('')
const regionIndex = ref(-1)
const regions = ref(['乌鲁木齐', '克拉玛依', '吐鲁番', '哈密', '昌吉', '博乐','巴州','阿克苏','克州','喀什','和田','伊犁','奎屯', '塔城', '阿勒泰','石河子'])
const regionsCode = ref(['0991', '0990', '0995', '0902', '0994', '0909','0906','0997', '0908','0998','0903','0999','0992', '0901', '0906','0993'])
const selectedFaultType = ref(-1)
const faultTypes = ref(['无法连接上网', '网速慢', '频繁掉线/断网'])

// 账号选择弹窗相关
const showAccountModal = ref(false)
const accountList = ref(['18999930691', '18999930696'])
const selectedAccountIndex = ref(-1)

onMounted(() => {
  const windowInfo = uni.getWindowInfo()
  const statusBarHeight = windowInfo.statusBarHeight || 0
  navBarHeight.value = statusBarHeight + 44
})

const selectAccount = () => {
  if (!broadbandAccount.value) {
    uni.showToast({
      title: '请输入宽带账号',
      icon: 'none'
    })
    return
  }
  
  if (regionIndex.value === -1) {
    uni.showToast({
      title: '请选择地区',
      icon: 'none'
    })
    return
  }

  // 校验宽带账号是否存在
  api.checkUserIsExist({
    kdzh: broadbandAccount.value,
    city: regionsCode.value[regionIndex.value],
    prodId: '150002',
  }).then(res => {
    console.log('校验宽带账号是否存在:', JSON.stringify(res))
    if(res.code == 200){
      uni.showToast({
        title: '宽带账号存在' || res.msg,
        icon: 'none'
      })
    }else{
      uni.showToast({
        title: '宽带账号不存在' || res.msg,
        icon: 'none'
      })
    }
  }).catch(err => {
    console.log('校验宽带账号是否存在:', JSON.stringify(err))
    uni.showToast({
      title: '校验宽带账号是否存在失败' || err.msg,
      icon: 'none'
    })
  })
}

const closeAccountModal = () => {
  showAccountModal.value = false
}

const selectAccountItem = (index) => {
  selectedAccountIndex.value = index
}

const confirmAccountSelection = () => {
  if (selectedAccountIndex.value >= 0) {
    broadbandAccount.value = accountList.value[selectedAccountIndex.value]
    showAccountModal.value = false
  } else {
    uni.showToast({
      title: '请选择一个账号',
      icon: 'none'
    })
  }
}

const onRegionChange = (e) => {
  regionIndex.value = e.detail.value
}

const selectFaultType = (index) => {
  selectedFaultType.value = index
}

const handleConfirm = () => {
  if (!broadbandAccount.value) {
    uni.showToast({
      title: '请输入宽带账号',
      icon: 'none'
    })
    return
  }
  
  if (regionIndex.value === -1) {
    uni.showToast({
      title: '请选择地区',
      icon: 'none'
    })
    return
  }
  
  if (!contactPhone.value) {
    uni.showToast({
      title: '请输入联系电话',
      icon: 'none'
    })
    return
  }
  
  if (selectedFaultType.value === -1) {
    uni.showToast({
      title: '请选择故障类型',
      icon: 'none'
    })
    return
  }

  api.verificationLocalBroadBandReport({
    number: broadbandAccount.value,
    city: regionsCode.value[regionIndex.value],

    type:3,  //type 1 =固话  2=itv  3对应宽带

    // contactPhone: contactPhone.value,
    // gzdh: faultTypes.value[selectedFaultType.value],
  }).then(res => {
    console.log('验证宽带状态:', JSON.stringify(res))
    if(res.code == 200){

      api.workOrder({
        number: broadbandAccount.value,
        city: regionsCode.value[regionIndex.value],
        // type:3,  //type 1 =固话  2=itv  3对应宽带
        tel: contactPhone.value,
        gzdh: faultTypes.value[selectedFaultType.value],
        status: 0,  //0本机 1账号 2身份证  3固话 4 itv / 5用户投诉 //7 手机报障 //6 小程序手机/9 小程序账号 8 小程序身份证  10 小程序固话 11小程序ITV
      }).then(res => {
        console.log('提交工单:', JSON.stringify(res))
        if(res.code == 200){
          uni.showToast({
            title: res.msg || '提交工单成功',
            icon: 'success'
          })
          setTimeout(() => {
            uni.navigateBack()
          }, 1500)
        }else{
          uni.showToast({
            title: res.msg || '提交工单失败',
            icon: 'none'
          })
        }
      }).catch(err => {
        console.error('提交工单失败:', err)
      })

    }else{
      uni.showToast({
        title: res.msg || '验证宽带状态失败',
        icon: 'none'
      })
    }
  }).catch(err => {
    console.error('验证宽带状态失败:', err)
  })
  
  // uni.showToast({
  //   title: '提交成功',
  //   icon: 'success'
  // })
  
  // setTimeout(() => {
  //   uni.navigateBack()
  // }, 1500)
}
</script>

<style scoped>
.this-device-page {
   
  /* background: rgba(245, 245, 245, 1); */
  position: relative;
  z-index: 1;
}
.page-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  pointer-events: none;
  object-fit: cover;
}

.gradient-bg {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  pointer-events: none;
  backdrop-filter: blur(40rpx);
background: rgba(255, 255, 255, 0.8);
}


.page-content {
  position: relative;
  z-index: 2;
  padding: 32rpx;
  padding-bottom: 40rpx;
}

/* 白色卡片容器 */
.form-card {
  /* background: rgba(255, 255, 255, 1); */
  border-radius: 16rpx;
  padding: 40rpx 32rpx;
  margin-bottom: 40rpx;
}

.form-item {
  margin-bottom: 40rpx;
}

.form-item:last-child {
  margin-bottom: 0;
}

.form-label {
  color: rgba(51, 51, 51, 1);
  font-family: HarmonyOS Sans SC;
  font-size: 28rpx;
  font-weight: 400;
  line-height: 32rpx;
  margin-bottom: 16rpx;
  display: block;
}

.form-input-wrapper {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.picker-wrapper {
  position: relative;
}

.form-input {
  flex: 1;
  height: 80rpx;
  padding: 0 24rpx;
  /* background: rgba(248, 248, 248, 1); */
  border: 2rpx solid rgba(204, 204, 204, 1);
  border-radius: 16rpx;
  font-family: HarmonyOS Sans SC;
  font-size: 28rpx;
  font-weight: 400;
  line-height: 80rpx;
  color: rgba(51, 51, 51, 1);
}

.form-input::placeholder {
  color: rgba(153, 153, 153, 1);
}

.select-btn {
  width: 120rpx;
  height: 80rpx;
  background: rgba(78, 138, 254, 1);
  color: rgba(255, 255, 255, 1);
  border-radius: 8rpx;
  font-family: HarmonyOS Sans SC;
  font-size: 28rpx;
  font-weight: 400;
  line-height: 80rpx;
  text-align: center;
  border: none;
  padding: 0;
}

.arrow-icon {
  width: 32rpx;
  height: 32rpx;
  flex-shrink: 0;
  position: absolute;
  right: 24rpx;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.6;
}

/* 单选按钮组 */
.radio-group {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.radio-item-container {
  /* background: rgba(248, 248, 248, 1); */
  border: 2rpx solid rgba(204, 204, 204, 1);
  border-radius: 16rpx;
  padding: 22rpx;
  cursor: pointer;
}

.radio-item {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.radio-circle {
  width: 40rpx;
  height: 40rpx;
  border: 2rpx solid rgba(204, 204, 204, 1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.3s;
  background: rgba(255, 255, 255, 1);
}

.radio-circle.checked {
  border-color: rgba(78, 138, 254, 1);
}

.radio-dot {
  width: 24rpx;
  height: 24rpx;
  background: rgba(78, 138, 254, 1);
  border-radius: 50%;
}

.radio-label {
  color: rgba(51, 51, 51, 1);
  font-family: HarmonyOS Sans SC;
  font-size: 28rpx;
  font-weight: 400;
  line-height: 32rpx;
  flex: 1;
}

/* 确定按钮 */
.confirm-btn {
  width: 100%;
  height: 80rpx;
  background: rgba(78, 138, 254, 1);
  color: rgba(255, 255, 255, 1);
  border-radius: 44rpx;
  font-family: HarmonyOS Sans SC;
  font-size: 32rpx;
  font-weight: 500;
  line-height: 80rpx;
  text-align: center;
  border: none;
  padding: 0;
}

/* 账号选择弹窗 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40rpx;
}

.modal-content {
  width: 100%;
  max-width: 600rpx;
  background: rgba(255, 255, 255, 1);
  border-radius: 16rpx;
  padding: 40rpx 32rpx;
  display: flex;
  flex-direction: column;
}

.modal-title {
  color: rgba(51, 51, 51, 1);
  font-family: HarmonyOS Sans SC;
  font-size: 36rpx;
  font-weight: 700;
  line-height: 42rpx;
  margin-bottom: 32rpx;
  text-align: center;
}

.modal-prompt {
  color: rgba(51, 51, 51, 1);
  font-family: HarmonyOS Sans SC;
  font-size: 28rpx;
  font-weight: 400;
  line-height: 32rpx;
  margin-bottom: 32rpx;
  text-align: left;
}

.account-list {
  max-height: 400rpx;
  margin-bottom: 32rpx;
}

.account-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24rpx 16rpx;
  /* border-bottom: 2rpx dashed rgba(78, 138, 254, 0.3); */
  cursor: pointer;
  /* border: 2rpx solid transparent; */
  border-radius: 16rpx;
  margin-bottom: 16rpx;
  transition: all 0.3s;
  border: 1rpx solid rgba(153, 153, 153, 1);
}

/* .account-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
} */

.account-item.checked {
  border: 1rpx solid rgba(78, 138, 254, 1);
  background: rgba(78, 138, 254, 0.05); 
  /* border-bottom: 1rpx solid rgba(78, 138, 254, 1); */
  margin-bottom: 16rpx;
}

.account-text {
  color: rgba(51, 51, 51, 1);
  font-family: HarmonyOS Sans SC;
  font-size: 28rpx;
  font-weight: 400;
  line-height: 32rpx;
  flex: 1;
}

.account-checkbox {
  width: 40rpx;
  height: 40rpx;
  border: 2rpx solid rgba(204, 204, 204, 1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 1);
  transition: all 0.3s;
}

.account-checkbox.checked {
  border-color: rgba(78, 138, 254, 1);
  background: rgba(78, 138, 254, 1);
}

.checkmark {
  color: rgba(255, 255, 255, 1);
  font-size: 24rpx;
  font-weight: bold;
  line-height: 1;
}

.modal-confirm-btn {
  width: 100%;
  height: 80rpx;
  background: rgba(78, 138, 254, 1);
  color: rgba(255, 255, 255, 1);
  border-radius: 80rpx;
  font-family: HarmonyOS Sans SC;
  font-size: 32rpx;
  font-weight: 500;
  line-height: 80rpx;
  text-align: center;
  border: none;
  padding: 0;
}
</style>
